<template>
    <Modal :mask-closable="false" v-model="deviceVisible" title="采购备件信息">
        <Form ref="deviceForm" :model="formTop" label-position="top" :rules="validateDevice">
            <Row :gutter="16">
                <Col :span="12">
                <FormItem label="备件编号" prop="maCode">
                    <Select v-model="formTop.maCode" filterable clearable :remote-method="handleRemote"
                        :loading="searchLoading" @on-select="handleChangeWl">
                        <Option v-for="item in numberList" :value="item.maCode" :key="item.maCode">{{ item.codeName }}
                        </Option>
                    </Select>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="备件名称">
                    <Input v-model="formTop.maName" clearable disabled />
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col :span="12">
                <FormItem :label="`${$t('equipCheck.Model')}:`">
                    <Input v-model="formTop.maModel" clearable disabled />
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="所需数量" prop="useNum">
                    <Input v-model="formTop.useNum" clearable @on-change="handleChangeUseNum" />
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col :span="12">
                <FormItem label="采购数量" prop="purchaseNum">
                    <Input v-model="formTop.purchaseNum" style="width: 100px;" clearable />
                    库存数量: {{ formTop.stockNum }}
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="备注" prop="note">
                    <Input v-model="formTop.note" clearable />
                </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
            <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "addDeviceModal",
    data() {
        return {
            workorderNo: '',
            deviceVisible: false,
            loadingVisible: false,
            searchLoading: false,
            formTop: {
                maCode: '',
                maName: '',
                maModel: '',
                maPrice: 0,
                useNum: '',
                stockNum: 0,
            },
            validateDevice: {
                maCode: [
                    { required: true, message: '请选择备件编码', trigger: 'change' }
                ],
                maName: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                maModel: [
                    { required: true, message: '请输入规格型号', trigger: 'blur' }
                ],
                useNum: [
                    { required: true, message: '请输入所需数量', trigger: 'blur' }
                ],
            },
            numberList: []
        }
    },
    watch: {
        // formTop: {
        //     handler(val) {
        //         console.log(val)
        //         // this.$nextTick(() => {
        //         //     this.getStockNum(this.formTop.maCode, this.workorderNo)
        //         // })
        //     },
        //     deep: true
        // }
    },
    methods: {
        show(workorderNo) {
            this.$refs.deviceForm.resetFields();
            this.formTop.maName = ''
            this.formTop.maModel = ''
            this.deviceVisible = true
            this.workorderNo = workorderNo
        },
        handleRemote(query) {
            console.log(query, this.formTop.maCode)
            if (query !== '') {
                this.searchLoading = true;
                this.axios({
                    method: 'get',
                    url: '/workorder/workorder/wlList',
                    params: {
                        maCode: query,
                        workorderNo: this.workorderNo
                    }
                }).then(res => {

                    if (res.code === 200) {
                        this.numberList = res.data.map(item => {
                            return {
                                ...item,
                                codeName: item.maCode + '-' + item.maName
                            }
                        })
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                    }
                }).finally(() => {
                    this.searchLoading = false
                })
            } else {
                this.numberList = [];
            }
        },
        async handleChangeWl(val) {
            console.log(val)
            console.log(this.numberList)
            let arr = this.numberList.length ? this.numberList.filter(item => item.maCode === val.value) : []
            console.log(arr)
            this.formTop = {
                maCode: arr[0].maCode,
                maModel: arr[0].maModel,
                maName: arr[0].maName,
                maPrice: arr[0].maPrice
            }
            await this.getStockNum(val.value, this.workorderNo)
        },
        getStockNum(key, workorderNo) {
            this.axios({
                method: 'get',
                url: '/workorder/customJco/executeJcoFunction',
                params: {
                    key,
                    workorderNo
                }
            }).then(res => {

                if (res.code === 200) {
                    this.$nextTick(() => {
                        this.formTop = {
                            ...this.formTop,
                            stockNum: res.data
                        }
                        console.log(this.formTop)
                    })


                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                }
            })
        },
        handleChangeUseNum(event) {
            console.log(event.target.value)
            let val = event.target.value ? event.target.value : 0
            if (parseInt(val) < parseInt(this.formTop.stockNum)) {
                this.formTop.purchaseNum = 0
            } else {
                this.formTop.purchaseNum = parseInt(val) - parseInt(this.formTop.stockNum)
            }
        },
        handleCancel() {
            this.deviceVisible = false
            this.loadingVisible = false
        },
        handleOk() {
            this.$refs.deviceForm.validate((valid) => {
                if (valid) {
                    this.deviceVisible = false
                    let obj = { ...this.formTop }
                    let arr = []
                    arr.push(obj)
                    this.$emit('refresh', arr)
                }
            })
            // let params = {
            //     ...this.formTop,
            //     type: 1,
            //     workorderNo: this.workorderNo
            // }
            // this.$refs.deviceForm.validate((valid) => {
            //     if (valid) {
            //         this.loadingVisible = true
            //         this.axios({
            //             method: 'post',
            //             url: '/workorder/workorderRecord/add',
            //             data: params
            //         }).then(res => {
            //             
            //             if (res.code === 200) {
            //                 this.deviceVisible = false
            //                 this.loadingVisible = false
            //                 this.$Message.success('新增成功！')
            //                 this.$refs.deviceForm.resetFields();
            //                 this.$emit('refresh', res.data)
            //             }else {
            //                 this.deviceVisible = false
            //                 this.loadingVisible = false
            //                 this.$Message.error(res.msg)
            //             }
            //         })
            //     }
            // }).finally(() => {
            //
            // })
        },
    }
}
</script>

<style scoped lang="scss">
::v-deep.ivu-form-item-label {
    background: white !important;
    /*display: inline-block;*/
    /*width: 40%;*/
    /*height: 48px;*/
    /*line-height: 48px;*/
    /*background: #ffffff;*/
    /*text-align: right;*/
    border-right: 0 !important;
    /*padding-right: 10px;*/
}

::v-deep.ivu-form-item {
    margin-bottom: 24px !important;
    border-right: 0 !important;
}
</style>
